<template>
  <common-card title="累计订单量" value="2,157,420">
    <template>
      <v-chart ref="creditChart" :options="getOptions()" />
      <!-- <div id="total-order-chart" style="width:100%;height:100%"></div> -->
    </template>
    <template v-slot:footer>
      <span>昨日订单量</span>
      <span class="emphasis">20,000,000</span>
    </template>
  </common-card>
</template>
<script>
import commonCardMixin from '../../mixins/commonCardMixin'
import resize from '../../mixins/resize'
export default {
  mixins: [commonCardMixin, resize],
  mounted() {
    // const chartDom = document.getElementById("total-order-chart");
    // const chart = this.$echarts.init(chartDom);
    // chart.setOption({
    //   xAxis: {
    //     type: "category",
    //     show: false,
    //     boundaryGap: false,
    //   },
    //   yAxis: {
    //     show: false,
    //   },
    //   series: [
    //     {
    //       type: "line",
    //       data: [
    //         620,
    //         432,
    //         220,
    //         534,
    //         790,
    //         430,
    //         220,
    //         320,
    //         532,
    //         320,
    //         834,
    //         690,
    //         530,
    //         220,
    //         620,
    //       ],
    //       // 区域样式
    //       areaStyle: {
    //         color: "purple",
    //       },
    //       // 线条
    //       lineStyle: {
    //         width: 0,
    //       },
    //       // 点
    //       itemStyle: {
    //         opacity: 0,
    //       },
    //       // 线条平滑
    //       smooth: true,
    //     },
    //   ],
    //   grid: {
    //     top: 0,
    //     bottom: 0,
    //     left: 0,
    //     right: 0,
    //   },
    // });
  },
  methods: {
    getOptions() {
      return {
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false
        },
        yAxis: {
          show: false
        },
        series: [
          {
            type: 'line',
            data: [
              620,
              432,
              220,
              534,
              790,
              430,
              220,
              320,
              532,
              320,
              834,
              690,
              530,
              220,
              620
            ],
            // 区域样式
            areaStyle: {
              color: 'purple'
            },
            // 线条
            lineStyle: {
              width: 0
            },
            // 点
            itemStyle: {
              opacity: 0
            },
            // 线条平滑
            smooth: true
          }
        ],
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }
      }
    }
  }
}
</script>
<style scoped></style>
